

import styled from 'styled-components';
import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
// import { DataViewApplication } from 'data-viewer';

import { TopHeader } from '../../components';

import { DataValuesViewerPage } from './data-values-viewer';
import { MetaDataViewerPage } from './meta-data-viewer';
import { DataGenerateViewerPage } from './data-generate-viewer';
import { DiscoveryHomePage, DiscoveryResultPage } from '../discovery';
import { FlowGrid } from '../flow/index'
import { SchedulerPage } from '../scheduler/scheduler';
import { SchedulerTaskType } from '@/services/local';

export const DataViewerPage = (props: any) => {

    const params = useParams();

    const navigate = useNavigate();

    const [activeKey, setActiveKey] = useState<string>(params.sub === 'datasource' ? 'datasource' : 'metadata');

    const [version, setVersion] = useState<number>(0);

    useEffect(() => {
        if (params.sub === 'datasource' || params.sub === 'metadata' || params.sub === 'dataflow') {
            setActiveKey(params.sub);
        }
    }, [params.sub]);

    return (
        <Container>
            <Header>
                <TopHeader
                    items={[
                        {
                            key: 'metadata',
                            label: '元数据',
                        },
                        {
                            key: 'datasource',
                            label: '数据源',
                        },
                        {
                            key: 'dataflow',
                            label: '数据流',
                        }
                    ]}
                    activeKey={activeKey}
                    onChange={async (key: string) => {
                        setActiveKey(key);
                        navigate(`/data/${key}`);
                    }}></TopHeader>
            </Header>
            <Content>
                {
                    activeKey === 'metadata' && <MetaDataViewerPage></MetaDataViewerPage>
                }
                {
                    activeKey === 'datasource' && <DataValuesViewerPage></DataValuesViewerPage>
                }
                {
                    activeKey === 'dataflow' && <SchedulerPage taskType={SchedulerTaskType.WORKFLOW}></SchedulerPage>
                }
            </Content>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const Header = styled.div`
    min-height: 45px;
    height: 45px;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
`;

const Content = styled.div`
    flex:  1;
    width: 100%;
    overflow: hidden;
`;